import React, {Component} from "react";
import {connect} from "react-redux"
import {createStore} from "redux"
import TaskAdder from "./TaskAdder";
import TaskList from "./TaskList";
import {reducer} from "./reducers";
import {active, add, complete, del} from "./actions";

class App extends Component {
    constructor(props) {
        super(props);
    }

    onActive(task) {
        this.props.dispatch(active(task));
    }

    onFinish(task) {
        this.props.dispatch(complete(task));
    }

    onDel(task) {
        this.props.dispatch(del(task));
    }

    onAdd(task) {
        this.props.dispatch(add(task));
    }

    render() {
        const {taskList} = this.props;
        return (
            <div style={{float: "right", width: "300px", border: "1px solid rebeccapurple", padding: "5px"}}>
    <div style={{fontStyle: "italic", fontWeight: "bold"}}>任务管理</div>
        <TaskAdder onAdd={this.onAdd.bind(this)}/>
        <TaskList taskList={taskList} onActive={this.onActive.bind(this)}
        onFinish={this.onFinish.bind(this)} onDel={this.onDel.bind(this)}/>
        </div>
    );
    }
}

// Which props do we want to inject, given the global state
function select(state = []) {
    return {
        taskList: state
    }
}

export const store = createStore(reducer);
// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；
export default connect(select)(App);

//初始化顺序 createStore->reducer(state,action)->connect(selector)App->selector(state)->App.render(props:{dispatch,...selector#Return})
//事件触发顺序 dispatch(action)->action->reducer(state,action)->selector(state)->App.render(props:{dispatch,...selector#Return})
